<!--
  运营平台使用： 活动配置页面  ( 服务商：服务商渠道配置，商户：渠道配置中的一个插槽 )

  @author yr
  @site https://www.jeequan.com
  @date 2023/03/16 14:14
-->

<template>
  <!-- 引入具体的接口组件  -->
  <component :is="vdata.currentComponent" ref="activityConfigPageRef" />
</template>

<script lang="ts" setup>
import {ref, reactive, getCurrentInstance, onMounted, nextTick, provide } from 'vue'
import { getOriginIfCode } from '../util/jeepayComponentUtil.js'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const activityConfigPageRef = ref()

// 定义父组件的传值
const props: any = defineProps({
  infoId: { type: String, default: '' }, // appId
  ifCode: { type: String, default: '' }, // 选择的接口
  configMode: { type: String, default: '' }, // 配置模式 
})

// 向下组件注入配置模式。 
provide('configMode', props.configMode)

// 向下组件注入 ( 渠道配置的商户应用ID 或商户编号 )
provide('appConfigModeByMchAppId', props.infoId)

// 向下组件注入 ( 渠道配置的 当前渠道 )
provide('appConfigModeBySelectedIfCode', props.ifCode)

const vdata : any = reactive({
  currentComponent: null,  // 动态组件
})

onMounted(() => {
// props.ifCode格式： ifCode或ifCode_1等等
// 保存数据使用传入的ifCode或ifCode_1，页面渲染使用ifCode(需截取ifCode_1)
const ifCodeView = getOriginIfCode(props.ifCode) // 页面渲染使用

// 根据支付接口名称  动态引入组件
 import(`../JeepayMchApplyment/diy/${ifCodeView}/ActivityConfig.vue`).then((module) => {
    vdata.currentComponent = null
    nextTick(() => vdata.currentComponent = module.default)
  }).catch(() => {
    // $infoBox.message.error('当前渠道不支持活动报名！')
  })
})
</script>

